<template>
    <div>
      <h1>图片列表</h1>
      <table>
        <thead>
          <tr>
            <th>图片ID</th>
            <th>图片信息</th>
            <th>标记次数</th>
            <th>拍摄时间</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="image in paginatedImages" :key="image.id">
            <td>{{ image.id }}</td>
            <td>{{ image.photoName }}</td>
            <td>{{ getStatusText(image.status) }}</td>
            <td>{{ formatTime(image.create_time) }}</td>
            <td>{{ image.description || '无' }}</td>
          </tr>
        </tbody>
      </table>
       <!-- 分页组件 -->
    <el-pagination
      v-if="images.length > 0"
      style="margin-top: 20px;"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="images.length"
      @current-change="handlePageChange">
    </el-pagination>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import moment from 'moment'; // 假设使用了moment.js来格式化日期
  
  export default {
    data() {
      return {
        currentPage: 1, // 当前页码
        pageSize: 15, // 每页显示的条数
        url: {
          getLable: '/medical/lable/getLable'
      },
        images: []
      };
    },
    created() {
      this.fetchImages();
    },
    methods: {
      async fetchImages() {
        try {
          const response = await axios.get(`${this.URLhost}${this.url.getLable}`, {
            params: { tagType: 'tongue'}
          }); // 替换为你的 API 地址
          const result = response.data;
  
          if (result.code === 0 && result.data.code === 0) {
            this.images = result.data.data;
          } else {
            console.error('获取图片列表失败:', result.msg || result.data.msg);
          }
        } catch (error) {
          console.error('请求失败:', error);
        }
      },
      getStatusText(status) {
        // 根据status的值返回相应的文本
        switch (status) {
          case 0:
            return '未标记';
          default:
            return '已标记';
        }
      },
      formatTime(time) {
        // 如果create_time为null或未定义，则返回空字符串
        if (!time) {
          return '';
        }
        // 使用moment.js格式化时间
        return moment(time).format('YYYY-MM-DD HH:mm:ss');
      }
    },
  computed: {
    paginatedImages() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.images.slice(start, end);
    }
  }
  };
  </script>
  
  <style scoped>
/* 样式保持不变 */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Arial', sans-serif; /* 使用现代字体 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
  border-radius: 8px; /* 圆角边框 */
  overflow: hidden; /* 隐藏超出的内容，配合圆角使用 */
}

th, td {
  border: 1px solid #ddd;
  padding: 12px; /* 增加内边距 */
  text-align: left; /* 左对齐文本 */
}

th {
  background-color: #81b2ac; /* 更改头部背景色 */
  color: white; /* 头部文字颜色为白色 */
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* 交替行背景色 */
}

tr:hover {
  background-color: #eef7ff; /* 悬停时背景色 */
  cursor: pointer; /* 改变鼠标悬停时的指针形状 */
}

@media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr { margin: 0 0 1rem 0; }

  tr:nth-child(odd) {
    background: none;
  }

  tr td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  tr td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  tr td:nth-of-type(1):before { content: "图片ID"; }
  tr td:nth-of-type(2):before { content: "图片信息"; }
  tr td:nth-of-type(3):before { content: "标记状态"; }
  tr td:nth-of-type(4):before { content: "拍摄时间"; }
  tr td:nth-of-type(5):before { content: "描述"; }
}
  </style>